<template>
  <el-row :gutter="20">
    <el-col :span="10" style="margin-left:50px">
      <el-card class="box-card">
        <div slot="header" style="background-color:#409EFF; color:white ">
          <span style="margin-left:30px; font-weight: bold;">
            <i class="el-icon-circle-plus-outline"></i>
            添加项目
          </span>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-bank-card"></i>
              项目编号：
              <el-input v-model="project.projectId" placeholder="SZ001F001" style="width: 260px"></el-input>
            </span>
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-connection"></i>
              项目名称：
            </span>
            <el-input v-model="project.projectName" style="width:260px" placeholder="请输入项目名称"></el-input>
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-user"></i>
              项目负责人：
            </span>
            <el-radio-group v-model="project.projectLeader">
              <el-radio label="张琪"></el-radio>
              <el-radio label="王娜"></el-radio>
              <el-radio label="赵丽"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-bank-card"></i>
              项目成员:
            </span>
            <span class="tabs">
              <el-tag
                v-for="item  in project.projectMember"
                :key="item"
                closable
                :disable-transitions="false"
                @close="handleClose(item)"
              >{{ item }}</el-tag>
            </span>
            <span @click="changeAddmMenber">
              <a href="#">
                <i class="el-icon-zoom-in"></i> 添加
              </a>
            </span>
          </el-form-item>

          <el-form-item label="起始时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="project.startTime"
                style="width:260px"
              ></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="project.endTime"
                style="width:260px"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold;color:#003D79;">
              <i class="el-icon-connection"></i>
              项目信息：
            </span>
            <el-input v-model="project.projectInfo" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交评论</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <el-col :span="10" style="margin-left:50px" v-show="isShow">
      <el-card class="box-card">
        <div slot="header" style="background-color:#009393; color:white ">
          <span style="margin-left:30px; font-weight: bold;">添加组员</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tab">
          <el-tab-pane label="A组" name="first">
            <span class="staff" @click="addMenber('张琪')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>张琪</b>
              </p>
            </span>
            <span class="staff" @click="addMenber('王娜')">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王娜</b>
              </p>
            </span>
            <span class="staff" @click="addMenber('赵丽')">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>赵丽</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="B组" name="second">
            <span class="staff" @click="addMenber('王亮')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>王亮</b>
              </p>
            </span>
            <span class="staff" @click="addMenber('汪芳')">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>汪芳</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="C组" name="third">
            <span class="staff" @click="addMenber('黄娜')">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>黄娜</b>
              </p>
            </span>
          </el-tab-pane>
          <el-tab-pane label="D组" name="fourth">
            <span class="staff" @click="addMenber('孔杰')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left:30px;font-weight:bolder">
                <b>孔杰</b>
              </p>
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";

export default ({
  name: 'projectAdd',
  data() {
    return {
      localUrl: 'http://localhost:8888',
      isShow: false,
      activeName: 'second',
      project: {
        projectId: "",
        projectName: "",
        projectLeader: "",
        projectInfo: "",
        projectMember: [],
        startTime: "",
        endTime: ""
      },
    }
  },
  methods: {
    onSubmit() {
      axios({
        method: 'post',
        url: this.localUrl + '/projectInfo/insert',
        data: this.project
      }).then((res) => {
        if (res != 0)
          alert("添加成功")
      })
      console.log('submit!');
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(tag) {
      this.project.projectMember.splice(this.project.projectMember.indexOf(tag), 1);
    },
    changeAddmMenber() {
      this.isShow = !this.isShow;
    },
    addMenber(name) {
      if (this.project.projectMember.indexOf(name) == -1)
        this.project.projectMember.push(name);
    }
  }
})
</script>

<style lang="less" scoped>
.box-card {
  width: 580px;
}
.el-card /deep/ .el-card__header {
  padding: 0;
  line-height: 50px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.tab {
  height: 400px;
}
.staff {
  float: left;
  margin-right: 15px;
}
.tabs {
  padding: 5px 15px;
  .el-tag {
    margin-right: 15px;
    cursor: pointer;
  }
}
</style>
